<template>
  <div>
    <!--动态生成的菜单-->
    <template v-for="item in menuList" :key="item.path">
      <!--没有子组件-->
      <template v-if="!item.children">
        <el-menu-item :index="item.path" v-if="!item.meta.hidden" @click="goRoute">
          <!--显示图标-->
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <template #title>
            <span>{{ item.meta.title }}</span>
          </template>
        </el-menu-item>
      </template>
      <!--有且仅有一个子组件-->
      <template v-if="item.children&&item.children.length==1">
        <el-menu-item :index="item.path" v-if="!item.children[0].meta.hidden" @click="goRoute">
          <!--显示图标-->
          <el-icon>
            <component :is="item.children[0].meta.icon"></component>
          </el-icon>
          <template #title>
            <span>{{ item.children[0].meta.title }}</span>
          </template>
        </el-menu-item>
      </template>
      <!--有多个子组件，需要用多级标签-->
      <el-sub-menu v-if="item.children&&item.children.length>1" :index="item.path">
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        <Menu-component :menu-list="item.children"></Menu-component>
      </el-sub-menu>
    </template>
  </div>
</template>

<script setup lang="ts">
//获取父组件传递过来的全部路由数组
defineProps(['menuList'])
//使用路由器
import {useRouter} from "vue-router";
//获取路由器对象
let $router = useRouter();

//点击事件的回调
let goRoute = (vc: any) => {//会将el-menu-item 实例VC注入，  获取VC的index属性，即为路由跳转的目标
  //路由跳转
  $router.push(vc.index)
}
</script>

<style scoped lang="scss">

</style>